<template>
  <div class="baseinfo border-bottom">
    <div class="score">
      <div class="score-top">
        <span>4.8</span>
        <span>分</span>
        <span>很棒</span>
      </div>
      <div class="score-bottom">
        <span>3999条评论</span>
        <span>9条攻略</span>
        <span class="iconfont">&#xe74e;</span>
      </div>
    </div>
    <div class="info border-left">
      <div class="info-top">
        <span>景点简介</span>
      </div>
      <div class="info-bottom">
        <span>开放时间、贴示</span>
        <span class="iconfont">&#xe74e;</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseInfo",
};
</script>

<style lang="stylus" scoped>
.baseinfo {
  position: relative
  display: flex;
  justify-content: space-around;
  padding: .2rem
  background: #fff
}
.score, .info {
  position: relative
  width: 100%;
}
.score-top {
  color: #ff8300
}
.score-top span:first-child {
  font-size: .4rem
  line-height: .4rem
}
.score-bottom {
  padding-top: .1rem 
  color: #9e9e9e
  font-size: .24rem
}
.iconfont {
  position: absolute
  right: .1rem
  top: .2rem
  font-size: .4rem
  color: #9e9e9e
}
.info {
  padding-left: .2rem   
}
.info-top {
  line-height: .4rem
}
.info-bottom {
  padding-top: .1rem
  color: #9e9e9e
  font-size: .24rem
}

</style>